// 文本导航
export const addSpanNav = (editor) => {
  const { Components, BlockManager } = editor;

  // 此组件为案例卡片组件，双击图片可以更改图片，点击text可以修改说明文字
  // 需要横向排列可以设置样式的float为left或right
  Components.addType('addSpanNav', {
    model: {
      defaults: {
        name: 'addSpanNav',
        droppable: false,
        attributes: { class: 'spanDiv' },
        components: [
          {
            type: 'span',
            attributes: { class: 'spanLink' },
            content: '商品详情'
          },
          {
            type: 'span',
            attributes: { class: 'spanLink' },
            content: '商品文件'
          },
          {
            type: 'span',
            attributes: { class: 'spanLink' },
            content: '价格说明'
          },
          {
            type: 'span',
            attributes: { class: 'spanLink' },
            content: '客户案例'
          },
          {
            type: 'span',
            attributes: { class: 'spanLink' },
            content: '评价信息'
          },
        ],
        script() {
          const links = document.querySelectorAll('.spanLink');
          // 默认选中第一个
          links[0].classList.add('active');

          links.forEach(link => {
            link.addEventListener('click', function () {
              // 移除其他元素的active类
              links.forEach(l => l.classList.remove('active'));

              // 为当前点击的元素添加active类
              this.classList.add('active');
            });
          });
        },
        styles: `
          .spanDiv{
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;;
          }
          .spanLink {
            width: 100px;
            height: 100%;
            text-align: center;
            color: black; /* 默认字体颜色 */
            cursor: pointer; /* 鼠标悬停时显示为手型 */
            line-height: 40px;
          }
          
          .spanLink:hover {
            color: #169bd5; /* 悬浮时字体变为蓝色 */
            border-bottom: 2px solid #169bd5;
          }

          .spanLink.active {
            color: #169bd5; /* 悬浮时字体变为蓝色 */
            border-bottom: 2px solid #169bd5;
          }
          
          
        `,
      },
    },
  });
  BlockManager.add("addSpanNav", {
    label: "文本导航",
    category: "首页组件",
    select: true,
    media: `<svg t="1720768327577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15366" width="30" height="30"><path d="M860.2 159.3H729.7c-19.8-94.7-121.3-95-204.8-95s-185.1 0.3-204.8 95h-154c-28.9 0-52.4 23.5-52.4 52.4v695.5c0 28.9 23.5 52.4 52.4 52.4h694.1c28.9 0 52.4-23.5 52.4-52.4V211.7c-0.1-28.9-23.5-52.4-52.4-52.4z m-481 35.5c0-59.2 31-67.6 145.7-67.6s145.7 8.4 145.7 67.6v31.4H379.2v-31.4z m470.5 701.9H176.6V222.2h139.8V289h417.1v-66.9h116.2v674.6z" p-id="15367"></path><path d="M289.7 402.7c-17.4 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4h471.5c17.4 0 31.4-14.1 31.4-31.4s-14.1-31.4-31.4-31.4H289.7zM642.9 556.3H289.7c-17.4 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4h353.2c17.4 0 31.4-14.1 31.4-31.4s-14.1-31.4-31.4-31.4zM524.9 724H289.7c-17.4 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4h235.2c17.4 0 31.4-14.1 31.4-31.4s-14-31.4-31.4-31.4z" p-id="15368"></path></svg>`,
    content: { type: "addSpanNav" },
  });
};
